<template>
  <div class="navBar flex-top">
    <div class="left_container">
      <slot name="left_slot"></slot>
    </div>
    <div class="center_container">
      <slot name="center_slot"></slot>
    </div>
    <div class="right_container">
      <slot name="right_slot"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "navBar",
  data() {
    return {};
  },
  props: {},
  methods: {},
};
</script>

<style scoped>
.navBar {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  /* background-color: #fff; */
  border-bottom: 0.01rem solid #eee;
  /* box-shadow: 0rem 0.02rem 0.05rem rgba(68, 68, 68, .65); */
}
.left_container,
.right_container {
  width: 1rem;
  height: 100%;
}
.navBar .center_container {
  flex: 1;
  height: 100%;
}
</style>